<template>
  <el-drawer
    v-bind="$attrs"
    v-model="showSetting"
    class="app-setting"
    resizable
    size="320px"
    append-to-body
    close-on-click-modal
    close-on-press-escape
    :show-close="false"
    :before-close="handleClose"
  >
    <template #header="{ close }">
      <div class="setting-header">
        <span>主题设置</span>
        <i class="sv-icon-close cursor-pointer" @click="close"></i>
      </div>
    </template>
    <div class="setting-content">
      <div class="setting-row">
        <el-divider>
          <div class="setting-title">
            <i class="sv-icon-gallery"></i>
            布局
          </div>
        </el-divider>
        <div class="layout-thumbnail">
          <div
            v-for="item in layoutList"
            :key="item.value"
            class="layout-thumbnail-img cursor-pointer"
            :class="{ 'layout-active': layout === item.value }"
            @click="changeLayout(item.value)"
          >
            <el-tooltip :content="item.name" effect="light" placement="top">
              <img class="w-h-full" :src="item.thumbnail" :alt="item.name" />
            </el-tooltip>
          </div>
        </div>
      </div>
      <div class="setting-row">
        <el-divider>
          <div class="setting-title">
            <i class="sv-icon-decorate"></i>
            外观
          </div>
        </el-divider>
        <div class="setting-item">
          <span>主题颜色</span>
          <el-color-picker v-model="primaryColor" :predefine="colorList" />
        </div>
        <div class="setting-item">
          <span>深色模式</span>
          <SwitchTheme @change="changeThemeMode"></SwitchTheme>
        </div>
        <div class="setting-item">
          <span>深色顶栏</span>
          <el-switch v-model="isHeaderDark" :disabled="disabledHeaderDark"></el-switch>
        </div>
        <div class="setting-item">
          <span>深色菜单</span>
          <el-switch v-model="isMenuDark" :disabled="disabledMenuDark" @change="changeMenuDark"></el-switch>
        </div>
        <div class="setting-item">
          <span>若依主题菜单</span>
          <el-switch v-model="isMenuRuoyi" :disabled="disabledMenuRuoyi" @change="changeMenuRuoyi"></el-switch>
        </div>
        <el-divider border-style="dashed" class="mtb-6" />
        <div class="setting-item">
          <span>菜单风格</span>
          <el-radio-group v-model="menuMode">
            <el-radio-button label="plain">朴素</el-radio-button>
            <el-radio-button label="radius">圆润</el-radio-button>
          </el-radio-group>
        </div>
        <div class="setting-item">
          <span>菜单图标</span>
          <el-switch v-model="isMenuIcon"></el-switch>
        </div>
        <div class="setting-item">
          <span>菜单手风琴</span>
          <el-switch v-model="isMenuAccordion"></el-switch>
        </div>
        <el-divider border-style="dashed" class="mtb-6" />
        <div class="setting-item">
          <span>面包屑启用</span>
          <el-switch v-model="isBreadcrumb"></el-switch>
        </div>
        <div class="setting-item">
          <span>面包屑图标</span>
          <el-switch v-model="isBreadcrumbIcon"></el-switch>
        </div>
        <el-divider border-style="dashed" class="mtb-6" />
        <div class="setting-item">
          <span>标签栏启用</span>
          <el-switch v-model="isTabbar"></el-switch>
        </div>
        <div class="setting-item">
          <span>标签栏图标</span>
          <el-switch v-model="isTabbarIcon"></el-switch>
        </div>
        <div class="setting-item">
          <span>标签栏风格</span>
          <el-radio-group v-model="tabbarMode">
            <el-radio-button label="plain">朴素</el-radio-button>
            <el-radio-button label="card">卡片</el-radio-button>
            <el-radio-button label="rect">方正</el-radio-button>
          </el-radio-group>
        </div>
        <el-divider border-style="dashed" class="mtb-6" />
        <div class="setting-item">
          <span>主内容风格</span>
          <el-radio-group v-model="mainMode">
            <el-radio-button label="matrix">矩阵式</el-radio-button>
            <el-radio-button label="waterfall">瀑布流</el-radio-button>
          </el-radio-group>
        </div>
        <div class="setting-item">
          <span>页脚启用</span>
          <el-switch v-model="isFooter"></el-switch>
        </div>
      </div>
      <div class="setting-row">
        <el-divider>
          <div class="setting-title">
            <i class="sv-icon-product"></i>
            通用
          </div>
        </el-divider>
        <div class="setting-item">
          <span>基础字体尺寸</span>
          <el-input-number v-model="baseFontSize" :min="10" :max="20" :step="1" step-strictly />
        </div>
        <div class="setting-item">
          <span>基础圆角尺寸</span>
          <el-slider v-model="baseRadius" :step="0.25" :min="0" :max="1" show-stops style="width: 50%" />
        </div>
        <div class="setting-item">
          <span>组件尺寸</span>
          <el-radio-group v-model="elSize">
            <el-radio-button label="small">较小</el-radio-button>
            <el-radio-button label="default">默认</el-radio-button>
            <el-radio-button label="large">较大</el-radio-button>
          </el-radio-group>
        </div>
        <div class="setting-item">
          <span>动态标题</span>
          <el-switch v-model="isDynamicTitle"></el-switch>
        </div>
        <div class="setting-item">
          <span>水印</span>
          <el-switch v-model="isWatermark"></el-switch>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script setup>
import layoutClassicImg from '@/assets/svgs/layout_classic.svg'
import layoutDivisionImg from '@/assets/svgs/layout_division.svg'
import layoutStreamImg from '@/assets/svgs/layout_stream.svg'
import layoutFusionImg from '@/assets/svgs/layout_fusion.svg'
import { useThemeStore } from '@/stores/theme'
import { storeToRefs } from 'pinia'
import SwitchTheme from '@/layouts/widgets/SwitchTheme/SwitchTheme.vue'
import { useEventBus } from '@vueuse/core'

const themeStore = useThemeStore()
const {
  layout,
  mainMode,
  primaryColor,
  isHeaderDark,
  isMenuDark,
  isMenuRuoyi,
  menuMode,
  isMenuAccordion,
  isMenuIcon,
  tabbarMode,
  isTabbar,
  isTabbarIcon,
  isBreadcrumb,
  isBreadcrumbIcon,
  isFooter,
  baseRadius,
  baseFontSize,
  isWatermark,
  elSize,
  isDynamicTitle,
} = storeToRefs(themeStore)

function handleClose(done) {
  done()
}

const showSetting = ref(false)

const e_theme_setting = useEventBus('E_THEME_SETTING')
e_theme_setting.on((e) => {
  showSetting.value = e
})

const layoutList = ref([
  {
    name: '经典',
    value: 'classic',
    thumbnail: layoutClassicImg,
  },
  {
    name: '流式',
    value: 'stream',
    thumbnail: layoutStreamImg,
  },
  {
    name: '分栏',
    value: 'division',
    thumbnail: layoutDivisionImg,
  },
  {
    name: '混合',
    value: 'fusion',
    thumbnail: layoutFusionImg,
  },
])

function changeLayout(e) {
  layout.value = e
}

// 预定义主题颜色
const colorList = ['#409eff', '#daa96e', '#0c819f', '#27ae60', '#e74c3c', '#f39c12', '#9b59b6', '#66ccff', '#39c5bb', '#fb7299']

// 主题模式
function changeThemeMode(e) {
  if (e == 'dark') {
    isHeaderDark.value = false
    isMenuRuoyi.value = false
    isMenuDark.value = false
    disabledHeaderDark.value = true
    disabledMenuDark.value = true
    disabledMenuRuoyi.value = true
  } else {
    disabledHeaderDark.value = false
    disabledMenuDark.value = false
    disabledMenuRuoyi.value = false
  }
}

// 深色顶栏
const disabledHeaderDark = ref(false)

// 深色菜单，与若依主题菜单互斥
const disabledMenuDark = ref(false)
function changeMenuDark(e) {
  if (e) {
    isMenuRuoyi.value = false
  }
}

// 若依主题菜单，与深色菜单互斥
const disabledMenuRuoyi = ref(false)
function changeMenuRuoyi(e) {
  if (e) {
    isMenuDark.value = false
  }
}
</script>

<style lang="scss">
.app-setting {
  --el-drawer-padding-primary: 0;

  .el-drawer__header {
    margin-bottom: 0;
  }

  .setting-header {
    width: 100%;
    height: var(--header-height);
    padding: 0 var(--base-gap);
    border-bottom: 1px solid var(--border-color);
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .setting-content {
    width: 100%;
    padding: 0 var(--base-gap);

    .setting-row {
      margin-bottom: calc(var(--base-gap) * 2);

      .setting-title {
        text-wrap: nowrap;
      }

      .setting-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: calc(var(--base-gap) / 2);
        border-radius: var(--base-radius);
        font-size: 14px;

        &:hover {
          background-color: var(--color-primary-gradient-9);
        }
      }

      .layout-thumbnail {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: var(--base-gap);

        .layout-thumbnail-img {
          width: calc((100% - var(--base-gap)) / 2);
          background-color: var(--color-primary-gradient-8);
          border: 2px solid var(--border-color);
          border-radius: var(--base-radius);
          padding: 2px;
        }

        .layout-active {
          border-color: var(--el-color-primary);
        }
      }
    }
  }
}
</style>
